import React, { Component } from 'react';
import { Tooltip, Button } from 'antd'
import TheImage from '@/components/TheImage';
import increase from '@/assets/icons/increase.png';

export default class Room extends Component {
    constructor() {
        super()
        this.state = {}
    }
    componentDidMount() {
    }
    putCar(item){
        this.props.putCar(item)
    }
    render() {
        const { item } = this.props
        let bgColor = '#CAF982'
        if([1, 3].includes(item.roomStatus)){
            bgColor = '#F59A23'
        }
        if(item.roomStatusDateVoList.length > 0 ){
            bgColor = '#EC808D'
        }
        return (
            <div className='tab-item' style={{backgroundColor:bgColor, border:'none'}} >
                <div className='tab-item-name'>
                    {item.serviceName+'-'+item.roomName}
                    { [1, 3].includes(item.roomStatus) && <Tooltip placement="bottomLeft" title={[
                        <h3 style={{ color: '#FFF' }}>该房间{item.roomStatus === 1 ?"已被预留":"正在维修中"}</h3>,
                    ]}>
                        <span className="tips">!</span>
                    </Tooltip> || item.roomStatusDateVoList.length > 0 && <Tooltip placement="bottomLeft" title={[
                        <h3 style={{ color: '#FFF' }}>已{item.hotelHomeStatus === 4 ? "被预定":"入住"}时间：</h3>,
                        item.roomStatusDateVoList.map(v=>{
                            return <>
                                <p>{v.beginTime+'~'+v.endTime}</p>
                            </>
                        })
                        
                    ]}>
                        <span className="tips">!</span>
                    </Tooltip>
                    }
                    
                </div>
                <div className='tab-item-bottom'>
                    <div>
                        <div className='symbol'>￥</div>
                        <div className="price">
                            {React.$transNum(item.serviceRealPrice, 2, -2)}
                        </div>
                    </div>
                    {
                        (![1, 3].includes(item.roomStatus) && item.roomStatusDateVoList.length <= 0 ) && <div onClick={() => this.putCar(item)}>
                            <TheImage preview={false} src={increase} width={22} height={22} />
                        </div>
                    }
                    
                </div>
            </div>
        );
    }
}
